<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { get_dev } from '../../utils/api';
const design: any = reactive({
   list: []
});
onMounted(async () => {
   let res = await get_dev();
   // console.log(res);
   if (res.data.code === 200) {
      design.list = res.data.data;
   }
});
const designleft = ref();
const designright = ref();
const designmain = ref();

const leftdesign = () => {
   designleft.value.style = `display:none;`;
   designmain.value.style = `transform: translateX(0); transition: all 0.3s;`;
   //  designmain.value.style = `transition: all 1s;`
   designright.value.style = `display:flex;`;
};

const rightdesign = () => {
   designleft.value.style = `display:block;`;
   designmain.value.style = `transform: translateX(${-17}%); transition: all 0.3s;`;
   //  designmain.value.style = `transition: all 1s;`
   designright.value.style = `display:none;`;
};

</script>

<template>
   <div class="box">
      <div class="design-img">
         <img src="./img/ITY{]]NUNUN3C`KLUTG@GV1.png" alt="">
      </div>
      <div class="design-main">
         <div class="design-top-main">
            <h2>设计大咖<span>&emsp;加入我们|月入5万不是梦!</span></h2><span class="spa">加入我们&gt;</span>
         </div>
         <div class="design-footer">
            <div class="design-footer-img" ref="designmain">
               <div class="design-footer-main" v-for="(item, index) in design.list" :key="index">
                  <img :src="item?.image" alt="">
               </div>
            </div>
            <div class="design-left" ref="designleft" @click="leftdesign()">
               <p>
                  <IconFont type="icon-fanhui" />
               </p>
            </div>
            <div class="design-right" ref="designright" @click="rightdesign()">
               <p>
                  <IconFont type="icon-jinru" />
               </p>
            </div>
         </div>
      </div>
   </div>
</template>

<style scoped>
.box {
   width: 100%;
   height: 340px;
}

.design-img {
   width: 100%;
   height: 100px;
}

.design-img img {
   width: 100%;
   height: 100%;
}

.design-main {
   width: 100%;
   height: 240px;
   position: relative;
}

.design-main h2 {
   float: left;
}

.design-top-main {
   width: 100%;
   height: 70px;
   float: left;
}

.design-top-main h2 span {
   color: #ccc;
   font-size: 14px;
   display: inline-block;
}

.design-top-main h2 span:hover {
   color: rgb(18, 97, 255);
   cursor: pointer;
}

.spa {
   float: right;
   font-size: 14px;
   color: #ccc;
   line-height: 70px;
}

.spa:hover {
   color: rgb(18, 97, 255);
   cursor: pointer;
}

.design-footer {
   width: 100%;
   height: 170px;
   float: left;
   overflow: hidden;
}

.design-footer-img {
   width: 2000px;
   display: flex;
   height: 150px;
}

.design-footer-main {
   width: 200px;
   height: 120px;
   display: flex;
   align-items: center;
   /* margin-right: 30px; */
   margin: 0 10px;
}

.design-footer-main img {
   width: 100%;
   height: 100%;
}

.design-left {
   width: 40px;
   height: 40px;
   box-shadow: 2px 2px 4px #000;
   background-color: #fff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   left: 15px;
   top: 100px;
   display: none;
}

.design-left p {
   float: left;
   display: flex;
   align-items: center;
   padding-left: 10px;
}

.design-left:hover {
   background-color: rgb(18, 97, 255);
   color: #fff;
   cursor: pointer;
}

.design-right {
   width: 40px;
   height: 40px;
   background: #fff;
   box-shadow: 2px 2px 4px #000;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   right: 15px;
   top: 100px;
}

.design-right:hover {
   background-color: rgb(18, 97, 255);
   color: #fff;
   cursor: pointer;
}
</style>